<template>
  <div class="EmergencyList gongdan">
    <div class="flex location-wrap">
      <span class="white" style="font-size: 16px;">当前位置：</span>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/EDManagement' }">应急处置</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/home' }">客户服务</el-breadcrumb-item>
        <el-breadcrumb-item>故障报修工单</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="box">
      <filterTitle @query="query" @reset="Reset" :form="formInline" :formData="formData" @node-click="deptChoose">
      </filterTitle>
      <LsdTable slot="gjxm" :paginationAtrrs="paginationAtrrs" @pageChange="handleSizeChange" :compRef="table.compRef"
        ref="gjxm" :columns="table.columns" :title="table.title" :actions="table.actions" :tableData="table.tableData"
        :tableAttr="table.tableAttr" :isShowPage="table.isShowPage" :isSelectFlag="table.isSelectFlag"
        :isSequenceFlag="table.isSequenceFlag" @onActionClick="onActionClick" />
    </div>
    <add :dialogvisible.sync="dialogVisible" @list="list" :type="type" :id="id"></add>
    <approval :visible.sync="Visible" @list="list" :id="id"></approval>
    <el-dialog title="重要用户停电信息" :visible="screenVisible" width="60%" :before-close="screenhandleClose">
      <screen></screen>
      <div slot="footer" class="dialog-footer"></div>
    </el-dialog>
  </div>
</template>

<script>
import add from "./components/add.vue";
import screen from "./components/screen.vue";
import approval from "./components/Approval.vue";
import { khfwSubmissionList, deletelist } from "@/api/EmergencyDisposal/khfw";
import { getOrgDepartmentList } from "@/api/common.js";
import {
  getpublishedinfo
} from "@/api/EmergencyDisposal/xymld.js";
export default {
  name: "",
  components: { add, approval, screen },
  data() {
    return {
      // 表格信息
      table: {
        isSelectFlag: false, // 是否展示选择器
        compRef: "gjxm",
        isSequenceFlag: true, // 是否展示序号
        isShowPage: true, // 是否展示分页
        resetFlag: true,
        loading: false,
        title: "故障报修工单列表",
        actions: [
          {
            id: "ListAdd",
            text: "新增",
            type: "primary",
            btnAttr: { size: "small" }
          }
        ],
        tableData: [],
        columns: [
          {
            prop: "sourceInfo",
            label: "响应命令单",
            align: "left",
            "width": "287px",
            render: (h, { row }) => {
              return (
                <div>
                  {
                    <span
                      class='commonTableStyle'
                      style='width: 100%'
                      {...{
                        on: {
                          click: () => {
                            this.toResponse(row.sourceInfoId);
                          }
                        }
                      }}
                    >
                      {row.sourceInfo}
                    </span>
                  }
                </div>
              );
            }
          },
          {
            prop: "orderName",
            label: "工单名称",
            align: "left",
            "width": "287px",
            render: (h, { row }) => {
              return (
                <div>
                  {
                    <span
                      class='commonTableStyle'
                      style='width: 100%'
                      {...{
                        on: {
                          click: () => {
                            this.operinfo(row);
                          }
                        }
                      }}
                    >
                      {row.orderName}
                    </span>
                  }
                </div>
              );
            }
          },
          {
            prop: "orderContent",
            label: "工单内容",
            align: "left",
            "width": "180px"
          },
          {
            prop: "userType",
            label: "用户类型",
            align: "left",
            "width": "94px"
          },
          {
            prop: "breakdownAddress",
            label: "故障地址",
            align: "left",
            "width": "180px"
          },
          {
            prop: "distributingUnit",
            label: "派发单位/部门",
            align: "left",
            "width": "200px"
          },
          {
            prop: "dutyUnit",
            label: "责任单位/部门",
            align: "left",
            "width": "180px"
          },
          {
            prop: "dutyOfficer",
            label: "责任人",
            align: "center",
            "width": "68px"
          },
          {
            prop: "createTime",
            label: "任务发布时间",
            align: "center",
            "width": "180px"
          },
          {
            prop: "planFinishTime",
            label: "要求完成时间",
            align: "center",
            "width": "180px"
          },
          {
            prop: "orderStatus",
            label: "状态",
            align: "center",
            "width": "80px",
            formatter: (row, column, cellValue, index) => {
              if (cellValue === 0) {
                return "编辑中";
              } else if (cellValue === 1) {
                return "待审批";
              } else if (cellValue === 2) {
                return "已发布";
              } else if (cellValue === 3) {
                return "已接收";
              } else if (cellValue === 4) {
                return "已反馈";
              } else if (cellValue === 5) {
                return "已驳回";
              }
            }
          },
          {
            prop: "cz",
            label: "操作",
            align: "center",
            fixed: "right",
            "width": "120px",
            render: (h, scope) => {
              let arr = [];
              const tbPower = this.common.isHasPower("tbr");
              const spPower = this.common.isHasPower("spr");
              if ([0, 5].includes(scope.row.orderStatus) && tbPower) {
                arr = ["编辑", "删除"];
              } else if (scope.row.orderStatus === 1 && spPower) {
                arr = ["审批"];
              } else if (scope.row.orderStatus === 4 && tbPower) {
                arr = ["查看"];
              }
              return (
                <div>
                  {
                    arr.map(item => {
                      return (
                        <span style='color:#3561fd;cursor:pointer;margin:0 10px' {...{
                          on: {
                            click: () => {
                              this.actionHandle(item, scope);
                            }
                          }
                        }}>
                          {item}
                        </span>
                      );
                    })
                  }
                </div>
              );
            }
          }
        ],
        // 表格样式
        tableAttr: {
          // "max-height": "430px",
          // height: "430px",
          stripe: false,
          border: true,
          fit: true,
          "show-header": true,
          "highlight-current-row": true,
          "cell-style": {
            "font-size": "16px"
          },
          "header-cell-style": {
            "text-align": "center",
            "background-color": "#B1C8F9",
            border: "1px solid #ccc",
            "font-size": "16px"
          }
        }
      },
      // 分页信息
      paginationAtrrs: {
        total: 0,
        "background": true,
        layout: "prev, pager, next",
        "current-page": 1,
        "page-size": 10
        // "page-sizes": [10, 20, 30, 40, 50, 100]
      },
      formData: [
        {
          elType: "select",
          id: "sourceInfoId",
          label: "响应命令单",
          attrs: {
            value: "",
            size: "small",
            clearable: true,
            filterable: true,
            "collapse-tags": true
          },
          options: []
        },
        {
          elType: "input",
          id: "orderName",
          label: "工单名称",
          attrs: {
            value: "",
            size: "small",
            clearable: true,
            "collapse-tags": true
          }
        },
        {
          elType: "input",
          id: "orderContent",
          label: "工单内容",
          attrs: {
            value: "",
            size: "small",
            clearable: true,
            "collapse-tags": true
          }
        },
        {
          elType: "input",
          id: "breakdownAddress",
          label: "故障地址",
          attrs: {
            value: "",
            size: "small",
            clearable: true,
            "collapse-tags": true
          }
        },
        {
          elType: "lsdTree",
          id: "distributingUnit",
          name: "distributingId",
          treeRef: "treeRef",
          keyWord: "keyWord",
          commonClick: "true",
          label: "派发单位/部门",
          attrs: {
            value: "",
            clearable: true,
            "collapse-tags": true
          },
          options: {
            attrs: {
              value: ""
            }
          },
          treeData: {
            attrs: {
              data: []
            },
            props: {
              children: "children",
              label: "orgName",
              value: "id"
            }
          }
        },
        {
          elType: "lsdTree",
          id: "dutyUnit",
          name: "unitId",
          label: "责任单位/部门",
          treeRef: "treeRef",
          keyWord: "keyWord",
          commonClick: "true",
          attrs: {
            value: "",
            clearable: true,
            "collapse-tags": true
          },
          options: {
            attrs: {
              value: ""
            }
          },
          treeData: {
            attrs: {
              data: []
            },
            props: {
              children: "children",
              label: "orgName",
              value: "id"
            }
          }
        },
        {
          elType: "select",
          id: "orderStatus",
          label: "状态",
          dic: "dic_zt",
          attrs: {
            value: "",
            clearable: true,
            size: "small",
            filterable: true,
            "collapse-tags": true
          },
          options: [
            {
              label: "编辑",
              value: 0
            },
            {
              label: "审批",
              value: 1
            },
            {
              label: "发布",
              value: 2
            },
            {
              label: "接收",
              value: 3
            },
            {
              label: "反馈",
              value: 4
            },
            {
              label: "驳回",
              value: 5
            }
          ]
        },
        {
          elType: "dateTimePicker",
          id: "orderPublishTime",
          label: "任务发布时间",
          clearable: true,
          attrs: {
            value: "",
            size: "small",
            type: "datetimerange",
            "start-placeholder": "开始日期",
            "end-placeholder": "结束日期",
            "value-format": "yyyy-MM-dd HH:mm:ss"
          }
        }
      ],
      id: "",
      type: {
        type: "新增",
        code: "add"
      },
      screenVisible: false,
      Visible: false,
      dialogVisible: false,
      multipleSelection: [],
      total: 6,
      pageNum: 1,
      pageSize: 10,
      formInline: {
        sourceInfoId: "", // 响应命令单
        orderName: "", // 工单名称
        orderContent: "", // 工单内容
        breakdownAddress: "", // 任务地点
        distributingUnit: "", // 派发单位
        dutyUnit: "", // 责任单位
        orderStatus: "", // 状态
        orderPublishTimeStart: "", // 任务开始时间
        orderPublishTimeEnd: "", // 任务结束时间
        orderPublishTime: []
      },
      from: {
        dic_fbzt: [
          {
            dicName: "编辑",
            dicCode: 0
          },
          {
            dicName: "审批",
            dicCode: 1
          },
          {
            dicName: "发布",
            dicCode: "2"
          },
          {
            dicName: "接收",
            dicCode: 3
          },
          {
            dicName: "反馈",
            dicCode: 4
          }
        ]
      }
    };
  },
  computed: {
    getCreator() {
      const account = sessionStorage.getItem("account");
      const org = sessionStorage.getItem("org");
      const role = sessionStorage.getItem("role");
      const creator = {
        name: (account && JSON.parse(account).realName) || "",
        dept: (org && JSON.parse(org).orgName) || "",
        role: (role && JSON.parse(role)) || {},
        org: (org && JSON.parse(org)) || {}
      };
      return creator;
    }
  },
  mounted() {
    this.list();
    this.GetOrgTreeData();
    this.getPublishedResponse();
    if (JSON.parse(sessionStorage.getItem("role")).roleCode === "hb_spr") {
      this.table.actions = [];
    }
  },
  methods: {
    // 列表表格按钮事件
    actionHandle(item, scope) {
      if (item === "编辑") {
        this.handleEdit(scope.row);
      } else if (item === "删除") {
        this.deletelist(scope.row);
      } else if (item === "审批") {
        this.Approval(scope.row);
      } else if (item === "查看") {
        this.operinfo(scope.row);
      }
    },
    toResponse(id) {
      this.$router.push({
        name: "EmergencyResponseinfo",
        query: {
          id
        }
      });
    },
    operinfo(row) {
      this.$router.push({
        path: "/Failurerepairinfo",
        query: {
          id: row.id
        }
      });
    },
    // 抛出列表按钮
    onActionClick(item, index) {
      this[item.id](); // 调用按钮对应方法
    },
    handleEdit(row) {
      this.dialogVisible = true;
      this.id = row.id;
      this.type = {
        type: "编辑",
        code: "edit"
      };
    },
    deletelist(row) {
      this.$confirm("此操作将永久删除该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        deletelist({
          id: row.id
        }).then(data => {
          if (data) {
            this.$message({
              message: "删除成功",
              type: "success"
            });
            this.list();
          }
        });
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除"
        });
      });
    },
    screenhandleClose() {
      this.screenVisible = false;
    },
    screen() {
      this.screenVisible = true;
    },
    Approval(row) {
      this.id = row.id;
      this.Visible = true;
    },
    ApprovalhandleClose() {
      this.Visible = false;
    },
    handleClose(done) {
      this.dialogVisible = false;
    },
    ListAdd() {
      this.dialogVisible = true;
      this.type = {
        type: "新增",
        code: "add"
      };
    },
    // 分页
    handleCurrentChange(val) {
      this.pageNum = val;
    },
    // 分页
    handleSizeChange(val) {
      console.log(val);
      this.pageNum = val["current-page"];
      this.pageSize = val["page-size"];
      this.list();
    },
    // 多选单选
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection);
    },
    query() {
      this.list();
    },
    Reset() {
      // this.$refs["form"].$children[5].$children[1].$children[0].panel.clearCheckedNodes();
      // this.$refs["form"].$children[5].$children[1].$children[0].panel.activePath = [];
      this.formInline = this.$options.data().formInline;
      this.list();
    },
    // 列表
    async list() {
      const parmas = {
        sourceInfoId: this.formInline.sourceInfoId, // 响应命令单
        orderName: this.formInline.orderName, // 工单名称
        orderContent: this.formInline.orderContent, // 工单内容
        breakdownAddress: this.formInline.breakdownAddress, // 任务地点
        distributingUnit: this.formInline.distributingUnit, // 派发单位
        dutyUnit: this.formInline.dutyUnit, // 责任单位
        orderStatus: this.formInline.orderStatus, // 状态
        orderPublishTimeStart: this.formInline.orderPublishTime[0], // 任务开始时间
        orderPublishTimeEnd: this.formInline.orderPublishTime[1], // 任务结束时间
        pageNum: this.pageNum,
        pageSize: this.pageSize
      };
      const res = await khfwSubmissionList(parmas);
      this.tableData = res.data;
      this.table.tableData = res.data;
      this.paginationAtrrs.total = res.total;
      this.total = res.total;
      // this.pageNum = res.pageNum
    },
    // 树状选择
    deptChoose(val, item) {
      if (item.label == "派发单位/部门") {
        this.$set(this.formInline, "distributingUnit", val[0].orgName);
      } else if (item.label == "责任单位/部门") {
        this.$set(this.formInline, "dutyUnit", val[0].orgName);
      }
    },
    // 获取责任单位
    async GetOrgTreeData() {
      // const res = await getpersonlist()
      const res = await getOrgDepartmentList({ orgId: JSON.parse(sessionStorage.getItem("org")).orgId });
      // this.formData[5].options = res;
      this.formData[4].treeData.attrs.data = res;
      this.formData[5].treeData.attrs.data = res;
    },
    // 获取已发布的响应命令单
    getPublishedResponse() {
      getpublishedinfo({}).then(res => {
        console.log(res);
        let options = [];
        options = res.map(item => {
          return {
            label: item.responseName,
            value: item.id,
            ...item
          };
        });
        this.formData[0].options = options;
      });
    }
  }
};
</script>

<style scoped lang="less">
@import "../../../assets/style/common.less";
@import "../../../assets/style/ComponentStyle.less";
@import "../../../assets/style/pop-upNotification.less";

:deep(.el-table) {
  .cell {
    padding-left: 3px;
    padding-right: 3px;
  }

  th.el-table__cell>.cell {
    padding: 0;
  }
}

.gongdan {
  font-size: 16px;

  :deep(.el-dialog) {
    // height: auto !important;

    .el-dialog__body {
      padding-bottom: 40px !important;
    }
  }
}

:deep(.el-breadcrumb__inner.is-link) {
  font-weight: 100;
  color: #fff;
}

.EmergencyList :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
  color: #3270ff;
}

:deep(.el-dialog__title) {
  font-weight: bold;
}

.box {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-top: 15px;
  background-color: #fff;
  border-radius: 4px;
  padding: 10px;
  box-sizing: border-box;
}
</style>
